<template>
  <div id="GoodCode" style="height: 500px">
    <el-row style="margin-top: 10px; margin-bottom: 20px">
      <el-col :span="16" style="position: absolute; top: 10px; left: 10px">
        <el-input
          placeholder="请选择客户"
          v-model="selectedCustomer"
          @focus="showDialog"
          style="width: 200px"
        ></el-input>
        <el-dialog title="选择客户" :visible.sync="dialogVisible" width="50%">
          <el-form>
            <el-row :gutter="10">
              <el-col :span="4">
                <el-select v-model="selectedCategory" placeholder="类别">
                  <el-option
                    v-for="category in categories"
                    :key="category"
                    :label="category"
                    :value="category"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="12">
                <el-input
                  placeholder="输入编号 / 名称 / 联系人 / 电话查询"
                  v-model="searchQuery"
                  style="width: 100%"
                ></el-input>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="showDisabled">显示禁用客户</el-checkbox>
              </el-col>
              <el-col :span="4">
                <el-button type="primary">查询</el-button>
              </el-col>
            </el-row>
          </el-form>

          <el-table
            :data="filteredCustomers"
            style="width: 100%; margin-top: 20px"
            ref="table"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              prop="category"
              label="类别"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="code"
              label="编号"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="contact"
              label="联系人"
              width="100"
            ></el-table-column>
            <el-table-column
              prop="phone"
              label="手机"
              width="150"
            ></el-table-column>
          </el-table>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmSelection">确定</el-button>
          </div>
        </el-dialog>
        <el-input
          placeholder="商品"
          v-model="productQuery"
          style="width: 200px; margin-left: 10px"
        ></el-input>

        <el-button
          type="primary"
          @click="searchCustomers"
          style="margin-left: 10px"
          >查询</el-button
        >

        <el-button type="primary" @click="importData" style="margin-left: 10px"
          >新增</el-button
        >
        <el-dialog
          title="新增客户物料编码"
          :visible.sync="dialogVisibled"
          width="60%"
        >
          <el-form label-width="100px">
            <el-form-item label="客户" required>
              <el-select placeholder="请选择客户">
                <el-option label="客户A" value="A"></el-option>
                <el-option label="客户B" value="B"></el-option>
                <el-option label="客户C" value="C"></el-option>
              </el-select>
            </el-form-item>
            <el-table style="width: 100%">
              <el-table-column type="expand">
                <template>
                  <el-form label-width="100px">
                    <el-form-item label="商品" required>
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="单位">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="属性">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="物料编码" required>
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="客户物料名称">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="客户物料规格">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item label="客户物料描述">
                      <el-input></el-input>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibled = false">取消</el-button>
            <el-button type="primary" @click="saveMaterialCode">确定</el-button>
          </div>
        </el-dialog>
        <el-button type="primary" @click="exportData" style="margin-left: 10px"
          >导入</el-button
        >
        <el-button type="primary" @click="exportData" style="margin-left: 10px"
          >导出</el-button
        >
        <el-button type="primary" @click="deleteData" style="margin-left: 10px"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%; position: absolute; top: 70px"
      @row-click="handleRowClick"
    >
      <el-table-column prop="customer" label="客户"></el-table-column>
      <el-table-column prop="product" label="商品"></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="attribute" label="属性"></el-table-column>
      <el-table-column prop="materialCode" label="物料编码"></el-table-column>
      <el-table-column
        prop="customerMaterialName"
        label="客户物料名称"
      ></el-table-column>
      <el-table-column
        prop="customerMaterialSpec"
        label="客户物料规格"
      ></el-table-column>
      <el-table-column
        prop="customerMaterialUnit"
        label="客户物料单位"
      ></el-table-column>
      <el-table-column prop="remarks" label="备注"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="position: relative; left: 700px; bottom: 30px; margin-top: 500px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "GoodCode",
  data() {
    return {
      selectedCustomer: "", // 当前选中的客户
      dialogVisibled: false,
      dialogVisible: false, // 控制对话框显示的变量
      searchQuery: "", // 搜索框的值
      customers: [
        {
          category: "华中地区",
          code: "1000008",
          name: "客户9",
          contact: "王",
          phone: "175****1234",
        },
        {
          category: "零售",
          code: "1000009",
          name: "零售",
          contact: "小李",
          phone: "183****8910",
        },
        {
          category: "批发",
          code: "1000010",
          name: "批发",
          contact: "",
          phone: "",
        },
        {
          category: "",
          code: "1000012",
          name: "食品批发中心",
          contact: "",
          phone: "",
        },
        { category: "", code: "1000013", name: "客户", contact: "", phone: "" },
        {
          category: "批发",
          code: "1000014",
          name: "要发发食品",
          contact: "",
          phone: "",
        },
        {
          category: "广东省内",
          code: "1000015",
          name: "小蝶食品",
          contact: "",
          phone: "",
        },
        {
          category: "",
          code: "G00009",
          name: "测试111",
          contact: "测试",
          phone: "",
        },
        {
          category: "广东省内",
          code: "G00010",
          name: "深圳蓝天食品公司",
          contact: "莫小姐",
          phone: "135****0000",
        },
      ],

      tableData: [], // 表格数据
      total: 0, // 总条目数
      pageSize: 10, // 每页显示条目数
      currentRow: null, // 当前选中行
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
      this.searchQuery = "";
    },
    importData() {
      this.dialogVisibled = true;
    },
    confirmSelection() {
      const selectedCustomers = this.$refs.table.selection;
      if (selectedCustomers.length > 0) {
        this.selectedCustomer = selectedCustomers[0].name;
      }
      this.dialogVisible = false;
    },

    handleAdd() {
      // 新增操作
      console.log("新增");
    },
    handleEdit(index, row) {
      // 编辑操作
      console.log("编辑", index, row);
    },
    handleDelete(index, row) {
      // 删除操作
      console.log("删除", index, row);
      this.tableData.splice(index, 1);
    },
    handleRowClick(row) {
      // 行点击事件
      this.currentRow = row;
    },
    handlePageChange(page) {
      // 分页改变事件
      console.log("当前页码", page);
    },
    fetchData() {
      // 模拟获取数据
      this.tableData = [
        {
          customer: "客户A",
          product: "商品1",
          unit: "单位1",
          attribute: "属性1",
          materialCode: "编码1",
          customerMaterialName: "名称1",
          customerMaterialSpec: "规格1",
          customerMaterialUnit: "单位1",
          remarks: "备注1",
        },
        // 更多数据...
      ];
      this.total = this.tableData.length;
    },
  },
  importData() {
    this.dialogVisible;
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
/* 添加一些基本样式 */
</style>